import React from 'react';

import styles from './index.module.less';

export default class Elevator extends React.Component {
  state = {
    logo: require('../../../asset/images/logo@mini.png'),
    scrollTop: 0,
    elevatorShow: false,
    elevatorLeft: 0/* (document.body.offsetWidth - 1200) / 2 - 74 - 20 */,
    floors: [
      { key: 1, name: '优质推荐', top: 607 },
      { key: 2, name: '行业市场', top: 1513 },
      { key: 3, name: '废金属', top: 1608 },
      { key: 4, name: '废塑料', top: 2228 },
      { key: 5, name: '废纸', top: 2848 },
      { key: 6, name: '二手设备', top: 3468 },
      { key: 7, name: '纺织皮革', top: 4088 },
      { key: 8, name: '电子电器', top: 4708 },
      { key: 9, name: '轮胎橡胶', top: 5328 },
      { key: 10, name: '交通运输', top: 5948 },
      { key: 11, name: '家具木材', top: 6568 },
      { key: 12, name: '其他废品', top: 7188 },
      { key: 13, name: '行业资讯', top: 7788 },
      { key: 14, name: '平台服务', top: 8428 },
    ],
  };

  componentDidMount() {
    // window.addEventListener('scroll', () => {
    //   const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

    //   if (scrollTop >= 400) {
    //     this.setState({
    //       scrollTop,
    //       elevatorShow: true,
    //     });
    //   } else {
    //     this.setState({
    //       scrollTop,
    //       elevatorShow: false,
    //     });
    //   }
    // });
  }

  scrollToPosition = top => {
    // window.scrollTo({
    //   top,
    //   behavior: 'smooth',
    // });
  };

  render() {
    const { scrollTop, elevatorShow, elevatorLeft, logo, floors } = this.state;

    return (
      <div className={styles.elevatorBox} style={{ left: elevatorLeft, display: elevatorShow ? 'block' : 'none' }}>
        <div className={styles.logo}>
          <img src={logo} alt='' />
        </div>
        {
          floors.map((item, index) => {
            const nextTop = floors[index + 1] ? floors[index + 1].top : 7918;

            const top = scrollTop + 442;

            const inFloor = top >= item.top && top <= nextTop;

            const classStr = styles.floorBtn + (inFloor ? ' ' + styles.active : '');

            return (
              <div
                className={classStr}
                key={item.key}
                onClick={this.scrollToPosition.bind(this, item.top)}
              >
                {item.name}
              </div>
            );
          })
        }
      </div>
    );
  }
}
